<template lang="html">
  <div class="app">
    <top-header :isActPark='isActPark'></top-header>
    <div class="parkDetail">
      <div class="parkDetail-banner">
        <img v-lazy='json.banner' alt="" class="po-middle-x">
      </div>
      <div class="bgf5">
        <div class="w1200 workPosIntro overhide">
          <div class="font fl">
            <div class="commonTit">
              办公场所介绍
            </div>
            <div class="tit">{{json.name}}</div>
            <div class="txt">
              {{json.txt}}
            </div>
          </div>
          <div class="info fr">
            <div class="code fl">
              <img v-lazy="require('../../assets/images/jy-code.png')" alt="">
              <p>官方公众号</p>
            </div>
            <div class="info-list fr">
              <div class="list">
                <i class="icon pos"></i><div class="pos inline">
                  {{json.pos}}
                </div>
              </div>
              <div class="list">
                <i class="icon tel ver-middle"></i>{{json.tel}}
              </div>
              <div class="list">
                <i class="icon manager ver-middle"></i>工场经理：{{json.manager}}
              </div>
              <div class="btns">
                <el-button type="text" @click="dialogVisible1 = true" class="btn visit">预约参观</el-button>
                <el-button type="text" @click="dialogVisible2 = true" class="btn join">申请入驻</el-button>
              </div>
            </div>
          </div>
          <el-dialog
            :visible.sync="dialogVisible1"
            size="tiny"
            :before-close="handleClose">
            <div class="dia-con">
              <div class="dia-tit">
                预约参观
              </div>
              <ul class="overhide">
                <li>
                  <i class="icon man ver-middle"></i>
                  <input type="text" placeholder="联系人">
                </li>
                <li>
                  <i class="icon tel ver-middle"></i>
                  <input type="text" placeholder="联系电话">
                </li>
                <li>
                  <i class="icon pos ver-middle"></i>
                  <input type="text" placeholder="公司职务">
                </li>
                <li>
                  <i class="icon company ver-middle"></i>
                  <input type="text" placeholder="公司名称">
                </li>
              </ul>
              <el-button type="warning" class="sub-btn">提 交</el-button>
            </div>
          </el-dialog>
          <el-dialog
            :visible.sync="dialogVisible2"
            size="tiny"
            :before-close="handleClose">
            <div class="dia-con">
              <div class="dia-tit">
                申请入驻
              </div>
              <ul class="overhide">
                <li>
                  <i class="icon man ver-middle"></i>
                  <input type="text" placeholder="联系人">
                </li>
                <li>
                  <i class="icon tel ver-middle"></i>
                  <input type="text" placeholder="联系电话">
                </li>
                <li>
                  <i class="icon pos ver-middle"></i>
                  <input type="text" placeholder="公司职务">
                </li>
                <li>
                  <i class="icon company ver-middle"></i>
                  <input type="text" placeholder="公司名称">
                </li>
              </ul>
              <el-button type="warning" class="sub-btn">提 交</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
      <div class="bg93">
        <div class="w1200 overhide homeBox">
          <img v-lazy="json.img1" alt="" class="fl">
          <div class="font fr">
            <div class="commonTit">
              空间类型介绍
            </div>
            <div class="tit">会议室 <span>[{{json.data1.length}}种]</span></div>
            <div class="txt">
              温馨又不失严谨，保护工作私密性。舒适宽敞的设计风格结合高调明亮的超大采光面积，保持工作激情的同时，给你最舒适的工作体验。
            </div>
            <div class="arrow-1" :class="{rotate:down[0].isRoll}" @click="arrowRoll1(0)"></div>
          </div>
        </div>
        <div class="bgff" :class="{slideDown:down[0].isDown}">
          <div class="w1200">
            <table>
              <tbody>
                <td>单价</td>
                <td>类别</td>
                <td>特征</td>
                <td>容量</td>
                <td>计费单位</td>
              </tbody>
              <tr v-for="(item,index) in json.data1" v-if='index<down[0].limit'>
                <td class="t1"><i class="icon rmb ver-middle"></i>{{item.price}}</td>
                <td>{{item.category}}</td>
                <td>{{item.type}}</td>
                <td>{{item.capacity}}</td>
                <td>{{item.unit}}</td>
              </tr>
            </table>
            <div class="loadMore" v-if='json.data1.length>down[0].moreShow' @click='loadMore(json.data1.length,0)'>查看更多</div>
          </div>
        </div>
      </div>
      <div class="bgf5">
        <div class="w1200 overhide homeBox">
          <div class="font fl">
            <div class="commonTit">
              空间类型介绍
            </div>
            <div class="tit">移动商务舱 <span>[{{json.data2.length}}种]</span></div>
            <div class="txt">
              商务时尚典范，设计风格独特，色调明亮简洁。配备全环保木质办公桌与人体工学设计办公椅，增加员工效率的同时，提升工作幸福感。
            </div>
            <div class="arrow-2" :class="{rotate:down[1].isRoll}" @click="arrowRoll1(1)"></div>
          </div>
          <img v-lazy="json.img2" alt="" class="fr">
        </div>
        <div class="bgff" :class="{slideDown:down[1].isDown}">
          <div class="w1200">
            <table>
              <tbody>
                <td>单价</td>
                <td>类别</td>
                <td>特征</td>
                <td>容量</td>
                <td>计费单位</td>
              </tbody>
              <tr v-for="(item,index) in json.data2" v-if='index<down[1].limit'>
                <td class="t1"><i class="icon rmb ver-middle"></i>{{item.price}}</td>
                <td>{{item.category}}</td>
                <td>{{item.type}}</td>
                <td>{{item.capacity}}</td>
                <td>{{item.unit}}</td>
              </tr>
            </table>
            <div class="loadMore" v-if='json.data2.length>down[1].moreShow' @click='loadMore(json.data2.length,1)'>查看更多</div>
          </div>
        </div>
      </div>
      <div class="bg93">
        <div class="w1200 overhide homeBox">
          <img v-lazy="json.img3" alt="" class="fl">
          <div class="font fr">
            <div class="commonTit">
              空间类型介绍
            </div>
            <div class="tit">独立办公区 <span>[{{json.data3.length}}种]</span></div>
            <div class="txt">
              严谨时尚的设计，全人体工学设计座椅与电子设备配置，最大限度的采光照明，让每个工作小时都充分发挥作用，独特的线上协同功能让会议更有效，让沟通更高效。
            </div>
            <div class="arrow-1" :class="{rotate:down[2].isRoll}" @click="arrowRoll1(2)"></div>
          </div>
        </div>
        <div class="bgff" :class="{slideDown:down[2].isDown}">
          <div class="w1200">
            <table>
              <tbody>
                <td>单价</td>
                <td>类别</td>
                <td>特征</td>
                <td>容量</td>
                <td>计费单位</td>
              </tbody>
              <tr v-for="(item,index) in json.data3" v-if='index<down[2].limit'>
                <td class="t1"><i class="icon rmb ver-middle"></i>{{item.price}}</td>
                <td>{{item.category}}</td>
                <td>{{item.type}}</td>
                <td>{{item.capacity}}</td>
                <td>{{item.unit}}</td>
              </tr>
            </table>
            <div class="loadMore" v-if='json.data3.length>down[2].moreShow' @click='loadMore(json.data3.length,2)'>查看更多</div>
          </div>
        </div>
      </div>
      <div class="bgf5">
        <div class="w1200 overhide homeBox">
          <div class="font fl">
            <div class="commonTit">
              空间类型介绍
            </div>
            <div class="tit">弹性工位 <span>[{{json.data4.length}}种]</span></div>
            <div class="txt">
              可以每人每天为租期，充分调动资源配备，满足您的碎片化时间。让您使用最低的成本，最大化工作效率，实现团队的弹性伸缩。
            </div>
            <div class="arrow-2" :class="{rotate:down[3].isRoll}" @click="arrowRoll1(3)"></div>
          </div>
          <img v-lazy="json.img4" alt="" class="fr">
        </div>
        <div class="bgff" :class="{slideDown:down[3].isDown}">
          <div class="w1200">
            <table>
              <tbody>
                <td>单价</td>
                <td>类别</td>
                <td>特征</td>
                <td>容量</td>
                <td>计费单位</td>
              </tbody>
              <tr v-for="(item,index) in json.data4" v-if='index<down[3].limit'>
                <td class="t1"><i class="icon rmb ver-middle"></i>{{item.price}}</td>
                <td>{{item.category}}</td>
                <td>{{item.type}}</td>
                <td>{{item.capacity}}</td>
                <td>{{item.unit}}</td>
              </tr>
            </table>
            <div class="loadMore" v-if='json.data4.length>down[3].moreShow' @click='loadMore(json.data4.length,3)'>查看更多</div>
          </div>
        </div>
      </div>
    </div>
    <bot-footer/>
  </div>
</template>

<script>
import axios from 'axios'
import topHeader from '../header/header.vue'
import botFooter from '../footer/footer.vue'
import {mapState} from 'vuex'
export default {
  data(){
    return{
      down:[
        {isRoll:false,bol:true,isDown:false,moreShow:5,limit:5},
        {isRoll:false,bol:true,isDown:false,moreShow:5,limit:5},
        {isRoll:false,bol:true,isDown:false,moreShow:5,limit:5},
        {isRoll:false,bol:true,isDown:false,moreShow:5,limit:5}
      ],
      json:{},
      isActPark:true,
      dialogVisible1: false,
      dialogVisible2: false
    }
  },
  methods:{
    load_info:function(){
      let id=this.$route.params.id;
      axios.get('http://cms.xinggeweb.com/api/action/article?version=1.0.1&apiNo=1000000&time=20170314160401&apiUser=api测试&checkSum=YBrs&p={articleId:'+id+'}')
      .then((response) => {
        this.json=response.data.data.article.json_data;
        let data1Str=response.data.data.article.json_data.data1;
        let data1Json=JSON.parse(data1Str);
        this.json.data1=data1Json
      }, (err) => {
        console.log(err)
      })
    },
    arrowRoll1:function(arr){
      if(this.down[arr].bol){
        this.down[arr].isRoll=true;
        this.down[arr].isDown=true
      }else{
        this.down[arr].isRoll=false;
        this.down[arr].isDown=false
      }
      this.down[arr].bol=!this.down[arr].bol;
    },
    // 弹窗
    handleClose(done) {
      done();
    },
    loadMore:function(index,arr){
      this.down[arr].limit=index;
      this.down[arr].moreShow=10000;//点击加载更多后使其隐藏（默认。
    }
  },
  created() {
    document.title = '解忧工场-活动详情'
  },
  activated(){
    this.load_info()
  },
  components:{
    topHeader,
    botFooter
  }
}
</script>

<style lang="less">
@import "park.less";
</style>
